<template>
<view class="content">
  <topHeight></topHeight>
  <view class="bac-color">
  <view class="back" @click="toBack">
    <view class="iconfont icon-fanhui"></view>
    <text>返回</text>
  </view>
    <view class="title">
    <view class="title1">{{title1}}</view>
    <view class="title2">{{title2}}</view>
    <view class="title3">{{title3}}</view>
    </view>
    <view class="user-list">
      <view class="user-item" v-for="item in fanList" :key="item.id">
        <view class="pic"><img :src="item.img" alt=""></view>
        <view class="info">
          <view class="name">
            <text>{{item.name}}</text>
            <text class="iconfont " :class="item.iconName"></text>
          </view>
          <text class="status">{{item.status}}</text>
        </view>
        <view class="number">{{item.num}}</view>
      </view>
    </view>
  </view>
</view>
</template>

<script>
import topHeight from "@/components/top-height";

export default {
name: "FanList",
  components:{
    topHeight
  },
  data(){
  return{
    title1:'武院校园菌',
    title2:'粉丝关注榜',
    title3:'根据过去7天评论数排名，每日0点更新',
    fanList:[
      {
        id:1,
        name:'大聪明',
        img:'../../../static/logo.png',
        iconName:'icon-renzheng',
        status:'校园菌-首席执行官',
        num:'25',
      },
      {
        id:2,
        name:'大聪明',
        img:'../../../static/logo.png',
        iconName:'icon-renzheng',
        status:'校园菌-首席执行官',
        num:'25',
      },
      {
        id:3,
        name:'大聪明',
        img:'../../../static/logo.png',
        iconName:'icon-renzheng',
        status:'校园菌-首席执行官',
        num:'25',
      },

    ]
  }
  },
  mounted() {
  },
  methods:{
    toBack(){
      uni.navigateBack({

      });
    },
  }
}
</script>

<style lang="scss" scoped>
.content{
  width: 100%;
  height: 100vh;
  background: #F1F1F1;
  .bac-color{
    width: 100%;
    height: 450rpx;
    padding-top: 50rpx;
    background: linear-gradient(to bottom, #F1B549 0%,#F7D484 100%);
    position: relative;
    .back{
      margin: 0 0 20rpx 20rpx;
      width: 150rpx;
      height: 70rpx;
      //position: absolute;
      z-index: 99;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius:  70rpx;
      background-color: rgba(128,128,128,0.5);
      color: #FFFFFF;
      font-size: 35rpx;
    }
    .title{
      //display: flex;
      align-items: center;
      text-align: center;
      color: #FFFFFF;
      margin-bottom: 30rpx;
      .title1{
        font-size: 35rpx;
      }
      .title2{
        font-size: 55rpx;
      }
    }
    .user-list{
      width: 600rpx;
      //height: 400rpx;
      background-color: #FFFFFF;
      margin: 0 auto;
      padding-top: 10rpx;
      box-shadow: 0 0 5rpx #E6E6E6;
      border-radius: 20rpx;
      padding-bottom: 20rpx;
      .user-item{
        display: flex;
        height: 110rpx;
        margin: 20rpx 30rpx 5rpx 30rpx;
        border-bottom: 3rpx solid #F6F6F6;
        .pic{
          width: 90rpx;
          height: 100rpx;
          background-color: #2ecc71;
          margin-right: 20rpx;
          overflow: hidden;
          background: url("../../../static/HeaderFrame.png");
          background-size: 90rpx 100rpx;
          position: relative;
          img{
            height: 68%;
            width: 68%;
            border-radius: 50%;
            position: absolute;
            left: 22rpx;
            top: 20rpx;
          }
        }
        .info{
          width: 330rpx;
          height: 90rpx;
          //background-color: #1ec6df;
          .name{
            font-size: 36rpx;
            font-weight: bold;
            margin-top: 20rpx;
          }
          .status{
            color: #888888;
          }
        }
        .number{
          width: 100rpx;
          height: 100rpx;
          //background-color: #007aff;
          font-size: 50rpx;
          color: #F1B549;
          font-weight: bold;
          padding-top: 20rpx;
        }
      }
    }
  }

}
</style>
